import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';

import FootTabBar from 'COMPONENT/FootTabBar';
import CommonHeader from 'COMPONENT/CommonHeader';
import {Icon,Button,List, Checkbox, Flex, Radio,} from 'antd-mobile'
import {Link} from 'react-router'
import { Modal, WhiteSpace, WingBlank ,Toast} from 'antd-mobile';

const RadioItem = Radio.RadioItem;


function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    }
    el = el.parentElement;
  }
  return null;
}



const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

export default class Home extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }
   constructor(props) {
    super(props);
    this.state = {
      modal1: false,
      modal2: false,
       value: 0,
      value2: 0,
    };
  }
  showModal = key => (e) => {
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => () => {
  	
    this.setState({
      [key]: false,

    });
    Toast.info('预约成功,可去我的预约查看详细信息',3,() => {
      this.context.router.push({
        pathname: '/RentQuery'
      })
    },true);

  }

  onWrapTouchStart = (e) => {
    // fix touch to scroll background page on iOS
    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
      return;
    }
    const pNode = closest(e.target, '.am-modal-content');
    if (!pNode) {
      e.preventDefault();
    }
  }


  componentWillMount() {
    //获取token
  }

 /* toAgreement=()=>{
    this.context.router.push({
        pathname: '/Home/Agreement'
      })

  }*/
   onChange = (value) => {
    console.log('checkbox');
    this.setState({
      value,
    });
  }
  onChange2 = (value) => {
    console.log('checkbox');
    this.setState({
      value2: value,
    });
  }
  confirm=()=>{
     Toast.info('付款成功',3,() => {
      this.context.router.push({
        pathname: '/RentQuery'
      })
    },true);
  }

  render() {
    let height = $(window).height()-50

    const { value,value2} = this.state;
    const data = [
     { value: 0, label: '银行卡支付' },
      { value: 1, label: '微信支付' },
      { value: 2, label: '支付宝支付' },
      { value: 3, label: '余额支付' },
    ];

    return(
        <div >
            <CommonHeader name='租期信息' leftContentTitle="@back" />
            <div className='agreement' style={{paddingBottom:'1rem'}}>
                <h2>xx公寓-祥源福邸-5居室-03卧</h2>


                <h4>支付方式 ： <span className='moneysss'>押一付三</span></h4>
                 <h4 style={{marginTop:'0rem'}}>共需支付 ： <span className='moneysss'>￥5580元</span></h4>


                <List renderHeader={() => '请选择您支付房租的方式'}>
                  {data.map(i => (
                    <RadioItem key={i.value} checked={value === i.value} onChange={() => this.onChange(i.value)}>
                      {i.label}
                    </RadioItem>
                  ))}
                </List>
            </div>


            {/*<div className='confirmFoot' style={{ background:`#108ee9` }}  onClick={this.confirm}>立即付款</div>*/}
            <div className="btnGroup-one-fixed">
                <Button type="primary" className="btnGroup-one-fixed-btn" onClick={this.confirm}>立即付款</Button>
            </div>

        </div>
    )
  }

}